@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './token.less';

@cascader-picker-prefix-cls: ~'@{kd-prefix}-cascader-picker';
@cascader-menus-prefix-cls: ~'@{kd-prefix}-cascader-menus';
@cascader-menu-prefix-cls: ~'@{kd-prefix}-cascader-menu';

.@{cascader-picker-prefix-cls} {
  position: relative;
  display: inline-block;
  outline: none;
  cursor: pointer;

  &:focus > &-input {
    border-color: @cascader-active-color;

    .@{kd-prefix}-input-suffix,
    i[class*="kdicon"] {
      color: @cascader-active-color;
    }
  }

  &:hover > &-input {
    .@{kd-prefix}-input-suffix,
    i[class*="kdicon"] {
      color: @cascader-active-color;
    }
  }

  &.disabled {
    .@{cascader-picker-prefix-cls}-input {
      cursor: not-allowed;
      border-color: @color-border-strong;

      .@{kd-prefix}-input-suffix,
      i[class*="kdicon"] {
        color: @cascader-disabled-color;
      }
    }
  }

  &-label {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 20px;
    padding: 0 24px 0 9px;
    line-height: 20px;
    transform: translateY(-50%);
    .ellipsis;
  }

  &-input {
    background-color: transparent !important;
    transition: all 0.2s;

    > input {
      color: transparent !important;
      cursor: pointer;
    }

    &.expand {
      border-color: @cascader-active-color;

      i[class*="kdicon"] {
        color: @cascader-active-color;
        transform: rotate(180deg);
      }
    }

    .@{kd-prefix}-input-suffix,
    i[class*="kdicon"] {
      transition: all 0.2s;
    }
  }

  &.allowClear:hover {
    > .@{cascader-picker-prefix-cls}-close {
      opacity: 1;
      visibility: visible;
      transition: all 0.2s;
      transform: scale(1) translateY(-50%);
    }

    .@{kd-prefix}-input-suffix {
      opacity: 0;
      visibility: hidden;
      transition: all 0.1s;
    }
  }

  &-close {
    position: absolute;
    top: 50%;
    right: 9px;
    opacity: 0;
    cursor: pointer;
    visibility: hidden;
    color: @cascader-active-color;
    transition: all 0.1s;
    transform-origin: 50% 50%;
    transform: scale(0.9) translateY(-50%);
  }
}

.@{cascader-menus-prefix-cls} {
  .reset-component;
  color: @cascader-color;
  border-radius: @cascader-radius-size;
  font-size: @cascader-font-size;
  font-weight: @cascader-font-weight;
  background-color: @cascader-bg-color;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
  opacity: 1;
  visibility: visible;
  z-index: @z-index-popper;

  &.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .@{cascader-menu-prefix-cls} {
    display: inline-table;
    height: @cascader-height;
    min-width: @cascader-menu-min-width;
    margin: 0;
    padding: @cascader-menu-padding-vertical 0;
    overflow-y: auto;

    &:not(:first-child) {
      border-left: 1px solid @color-border-strong;
    }

    &-item {
      display: flex;
      justify-content: space-between;
      padding: 0 @cascader-menu-item-padding-horizontal;
      line-height: @cascader-menu-item-height;
      cursor: pointer;

      &:not(.disabled, .selected):hover {
        background-color: @cascader-hover-bg-color;
        transition: all calc(@duration-promptly - 0.1s) @motion-ease;
      }

      &.disabled {
        color: @cascader-disabled-color;
        cursor: not-allowed;
      }

      &.selected {
        color: @cascader-selected-color;
        background-color: @cascader-selected-bg-color;
      }

      &-label {
        width: 72px;
        .ellipsis;
      }

      &.last .@{cascader-menu-prefix-cls}-item-label {
        width: 92px;
      }
    }
  }

  .@{kd-prefix}-empty {
    padding: 10px 0 20px;
  }
}
